<template>
<div class="sidebar_box">
  <SidebarItem v-for="item in sidebar"
               :link="item.link"
               :text="item.text"
               :active="item.active"
               :icon="item.icon" />
</div>
</template>

<script setup>
import SidebarItem from "./SidebarItem.vue";
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";

const sidebar = ref([
  {
    link: '/admin',
    text: '首页',
    icon: 'tachometer-alt',
    active: false
  },
  {
    link: '/admin/blog',
    text: '博客管理',
    icon: 'pen',
    active: false
  },
  {
    link: '/admin/comment',
    text: '评论审核',
    icon: 'comment-alt',
    active: false
  }
])

const route = useRoute()

const initSidebar = () => {
  const currentRoute = route.path
  console.log(currentRoute);
  sidebar.value.find(item => currentRoute === item.link).active = true
}

onMounted(() => {
  initSidebar()
})
</script>

<style scoped>
.sidebar_box {
  padding: 40px;
}
</style>